<template>
	<view class="flex-col page">
		<u-navbar title="素材库" back-icon-color="#fff" title-color="#fff" :background="background"></u-navbar>
		<view class="" v-if="cateList.length > 0">
			<view class="flex-col group_2" style="position: relative;">
				<view class="flex-row justify-between items-center" style="position: relative;width: 100%;height: 100%;">
					<view class="" style="width: 100%;overflow-x: scroll;white-space: nowrap;padding-right: 20rpx;">
						<text @click="changeTabs(item,index)" class="tabs-font" :class="currentTabs == index ? 'active' : 'font'"
							v-for="(item,index) in cateList" :key="index">
							{{item.name}}
						</text>
					</view>
					<view @click="openCatePop" class="flex-row items-center "
						style="position: absolute;right: 0;top: 50%;transform: translateY(-50%);background-color: #111113;height: 100%;padding-left: 20rpx;">
						<image class="image_6" src="https://terminator.axu9.com/images/edit/video-cate-icon.png" />
					</view>
			
				</view>
				<view v-if="showPop" class=""
					style="position: absolute;top: 0;left: 0;width: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 999;"
					:style="{height: maskCustonHeight + 'px'}">
					<view class="flex-col section_22" style="height: 100%;">
						<view class="flex-row items-center group1">
							<text class="text_2">编辑分类</text>
							<image @click="closeCatePop" class="shrink-0 image_66 ml-272"
								src="https://terminator.axu9.com/images/edit/close-icon.png" />
						</view>
						<view class="flex-col group_22" :style="{height: cateContentHeight + 'px'}" style="overflow-y: scroll;padding-bottom: 40rpx;">
							<view class="cate-item">
								<view v-for="(item,index) in cateList" :key="index" class="flex-col justify-start relative group_33">
									<view class="flex-col justify-start items-center text-wrapper1 view_33"><text
											class="font-cate">{{item.name}}</text></view>
									<image @click="delCate(item)" class="image_77 pos_2"
										src="https://terminator.axu9.com/images/edit/del-cate.png" />
								</view>
			
			
							</view>
						</view>
					</view>
				</view>
			
			
			</view>
			<view v-if="videoList.length > 0" class="" :style="{height: availableHeight + 'px'}" style="overflow-y: scroll;padding: 0 30rpx;">
				<view class="mt-9 grid">
					<view v-for="item in videoList" class="flex-row justify-between grid-item">
						<video :src="item.url" play-strategy="1"
							object-fit="cover"
							:vslide-gesture-in-fullscreen="false" style="width: 100%;height: auto;border-radius: 8rpx;">
						</video>
						<image @click="toEdit(item)" class="self-center image_7"
							src="https://terminator.axu9.com/images/edit/all-screen-icon.png" />
					</view>
					
					<!-- <view @click="toEdit" class="flex-row justify-between grid-item" v-for="item in videoList">
						<image class="self-center image_7"
							src="https://terminator.axu9.com/images/edit/all-screen-icon.png" />
						
						<text class="self-start font_2 text_3">00:04</text>
					</view> -->
				</view>
				
			</view>
			<view v-else class="flex-col items-center justify-center" :style="{height: (maskCustonHeight - 180) + 'px'}">
				<image class="empty-img" src="https://terminator.axu9.com/images/edit/video-empty.png" mode=""></image>
				<text class="empty-text">暂无素材 赶快去添加吧～</text>
			</view>
		</view>
		<view class="flex-col items-center justify-center" :style="{height: (maskCustonHeight - 180) + 'px'}" v-else>
			<image class="empty-img" src="https://terminator.axu9.com/images/edit/video-empty.png" mode=""></image>
			<text class="empty-text">暂无素材 赶快去添加吧～</text>
		</view>
		<view class="flex-row equal-division section_2">
			<view @click="addCate" class="flex-col items-center group_3 equal-division-item">
				<image class="image_9" src="https://terminator.axu9.com/images/edit/add-cate.png" />
				<text class="font_3 mt-9">添加分类</text>
			</view>
			<view class="horiz-divider section_3"></view>
			<view @click="toAddVideo" class="flex-col items-center group_3 equal-division-item">
				<image class="image_9" src="https://terminator.axu9.com/images/edit/add-video-icon.png" />
				<text class="font_3 mt-9">添加视频</text>
			</view>
		</view>
		<!-- 添加分类 -->
		<u-popup v-model="addCatePop" mode="center">
			<view class="flex-col section_444">
				<text class="self-center text_222">视频分类</text>
				<view class="flex-col justify-start items-start self-stretch text-wrapper_3">
					<!-- <text class="font1 text_33">请输入新增分类</text> -->
					<input style="padding-left: 20rpx;color: #fff;" type="text" v-model="cateName" placeholder="请输入新增分类" />
				</view>
				<view class="flex-row self-stretch group_222">
					<view @click="cancelPop" class="flex-col justify-start items-center text-wrapper_4"><text
							class="text_444">取消</text></view>
					<view @click="confirmPop" class="flex-col justify-start items-center text-wrapper_5 ml-13-5"><text
							class="font_22">确定</text></view>
				</view>
			</view>
		</u-popup>
		<!-- 添加视频 -->
		<u-popup v-model="addVideoPop" mode="center">
			<view class="flex-col section_444">
				<text class="self-center text_222">添加视频</text>
				<view @click="openCateSelect" class="flex-col justify-start items-start self-stretch text-wrapper_3">
					<text style="padding-left: 20rpx;color: #fff;" class="font1">{{selectCateValue == '' ? '请选择分类' : selectCateValue}}</text>
					<!-- <input style="padding-left: 20rpx;color: #fff;" type="text" v-model="cateName" placeholder="请输入新增分类" /> -->
					<!-- <u-picker v-model="cateListShow" mode="selector"></u-picker> -->
				</view>
				<view class="flex-row self-stretch group_222">
					<view @click="cancelVideoPop" class="flex-col justify-start items-center text-wrapper_4"><text
							class="font_2 text_444">取消</text></view>
					<view @click="addVideoConfirm" class="flex-col justify-start items-center text-wrapper_5 ml-13-5"><text
							class="font_22">确定</text></view>
				</view>
			</view>
		</u-popup>
		<PickerGreen :show="cateListShow" :list="cateSelectList" :title="title" :min="1" :max="0" :cancelColor="cancelColor"
			:confirmColor="confirmColor" :cancelText="cancelText" :confirmText="confirmText" @cancel="cancel"
			@confirm="confirm"></PickerGreen>
		
		<!-- 上传视频进度条弹窗 -->
		<progressPop ref="progressPop" :isShow="true" :percent="percent" @cancel="showProgressCancel"></progressPop>
	</view>
</template>

<script>
	import {
		getElementHeightByClassName,
		getNodeHeightByClassName
	} from "@/utils/index.js"
	import {
		getCateList,
		createCate,
		getVideoList,
		addVideo,
		delCate
	} from "@/api/edit.js"
	import {
		getQiniuToken,
	} from "@/api/user.js"
	import {
		completQiniuUploadUrl,
		qiniuDomainUrlD,
		baseURL1
	} from "@/api/request.js"
	import PickerGreen from '../../components/pickerGreen/index.vue';
	import progressPop from "../../components/progressPop/index.vue";
	export default {
		components: {
			PickerGreen,
			progressPop
		},
		data() {
			return {
				cancelText: '取消',
				confirmText: '确定',
				confirmColor: '#fff',
				cancelColor: '#999999',
				cateListShow: false,
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 1)'
				},
				screenHeight: 0,
				statusBarHeight: 0,
				maskCustonHeight: 0,
				addCatePop: false,
				cateName: '',
				cateList: [],
				cateSelectList: [],
				showPop: false,
				currentTabs: 0,
				availableHeight: 0,
				cateContentHeight: 0,
				videoList: [],
				cate_id: '',//分类id
				page: 1,//当前页面页数
				rows: 10,//每页条数
				addVideoPop: false,
				title: '选择分类',
				selectCateValue: '',
				selectCateId: '',
				percent: 0, //进度条
				uploadTask: null, //上传视频任务
				videoPath: '',//上传视频路径
			}
		},
		async onLoad() {
			const systemInfo = wx.getSystemInfoSync();
			console.log(systemInfo, 'systemInfo')
			this.screenHeight = systemInfo.screenHeight;
			this.statusBarHeight = systemInfo.statusBarHeight;
			console.log(this.screenHeight, this.statusBarHeight)
			this.maskCustonHeight = (this.screenHeight - this.statusBarHeight - 48)
			
			
			this.getCateList()
			// if(this.cateList.length > 0){
			// 	var section2Height = await getNodeHeightByClassName('section_2');
			// 	var group2Height = await getNodeHeightByClassName('group_2');
				
			// 	this.availableHeight = this.maskCustonHeight - section2Height - group2Height
			// 	console.log('Element height:', this.availableHeight, 'px');
			// }
		},
		methods: {
			delCate(item){
				console.log(item,'itemmmmmm')
				var _this = this;
				uni.showModal({
				    title: '提示',
				    content: '是否删除该分类,删除后不可恢复?',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							_this.delCateConfirm(item.id)
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			delCateConfirm(id){
				delCate({
					id: id
				}).then(res => {
					if(res.errno == 0){
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						this.getCateList()
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '出错了',
						icon: 'none'
					})
				})
			},
			toAddVideo() {
				var _this = this;
				var sizeType;
				// 获取手机系统信息
				uni.getSystemInfo({
					success: function(info) {
						console.log(info, 'info')
						var platform = info.platform;
						if (platform == 'ios') {
							// sizeType = _this.modeValue == '标清' ? ['compressed'] : ['compressed','original'];
							sizeType = _this.modeValue == '标清' ? ['compressed'] : [
								'original'
							];
							// #ifdef MP-WEIXIN
							_this.chooseVideoStepTwo(sizeType);
							// #endif
							// #ifdef APP || H5
							_this.chooseVideoStepTwoAPP(sizeType);
							// #endif
						} else {
							// sizeType = ['original','compressed'];
							sizeType = _this.modeValue == '标清' ? ['compressed',
								'original'
							] : ['original'];
							// #ifdef MP-WEIXIN
							_this.chooseVideoStepTwo(sizeType);
							// #endif
							// #ifdef APP || H5
							_this.chooseVideoStepTwoAPP(sizeType);
							// #endif
						}
			
					}
				});
			},
			// 微信小程序上传视频
			chooseVideoStepTwo(sizeType) {
				console.log(sizeType)
				var _this = this;
				uni.chooseMedia({
					count: 1,
					mediaType: ['video'],
					sourceType: ['album'],
					sizeType: sizeType,
					success: (res) => {
						console.log(res, 'dddddd')
						_this.$refs.progressPop.open();
						// 现在可以将视频上传到服务器
						// console.log(this.videoPath, 'this.videoPath')
						// _this.uploadVideo(res.tempFilePath);
						// _this.uploadImg(res.thumbTempFilePath);
						// 在这里处理压缩后的视频路径 compressRes.tempFilePath
						_this.uploadQiniuReauest(res.tempFiles[0].tempFilePath, res
							.tempFiles[0]
							.thumbTempFilePath)
					},
					fail: (err) => {
						console.log('选择视频失败：', err);
					}
				})
			},
			generateRandomString(length) {
				const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
				let result = '';
				const charactersLength = characters.length;
				for (let i = 0; i < length; i++) {
					result += characters.charAt(Math.floor(Math.random() * charactersLength));
				}
				return result;
			},
			// 七牛上传接口封装
			uploadQiniuReauest(videoUrl, imgUrl) {
				// uni.showLoading({
				// 	title: '上传中'
				// })
			
				var timestamp = Date.now();
				var userId = uni.getStorageSync('userId');
				var name = userId + '/' + this.generateRandomString(8) + timestamp;
			
				var _this = this;
				getQiniuToken().then(res => {
					let token = res.data;
					console.log(res.data, '获取七牛token')
					_this.uploadTask = uni.uploadFile({
						filePath: videoUrl,
						name: 'file',
						url: completQiniuUploadUrl,
						timeout: 1000000,
						formData: {
							token: token,
							key: name
						},
						success: (uploadFileRes) => {
							uni.hideLoading()
							let logo = JSON.parse(uploadFileRes.data);
							console.log(logo, 'logo')
							if (logo.key) {
								console.log(qiniuDomainUrlD + logo.key, '上传路径');
								_this.videoPath = qiniuDomainUrlD + logo.key
								_this.addVideoPop = true;
								// resolve(qiniuDomainUrl + logo.key)
								// _this.uploadImg(_this.videoPath, imgUrl);
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'error'
								})
								_this.$refs.progressPop.close();
							}
			
						},
						fail: (err) => {
							uni.hideLoading()
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							})
							// reject(err)
						}
					})
					// 监听上传进度  
					_this.uploadTask.onProgressUpdate((res) => {
						// this.uploadPercent = res.progress; // 更新进度条  
						// console.log('上传进度', res.progress);
						this.percent = res.progress;
						if (this.percent >= 100) {
							this.$refs.progressPop.close();
							
							setTimeout(() => {
								this.percent = 0;
							}, 1000)
			
			
						}
						// console.log('已经上传的数据长度', res.totalBytesSent);
						// console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
					});
				})
			
			
			},
			showProgressCancel() {
				console.log('关闭上传弹窗')
				this.uploadTask.abort();
				this.uploadTask = null;
			},
			cancel(){
				this.cateListShow = false;
			},
			confirm(data){
				this.cateListShow = false;
				this.selectCateValue = this.cateSelectList[data].label
				this.selectCateId = this.cateSelectList[data].id
			},
			addCate(){
				this.addCatePop = true;
			},
			confirmPop(){
				if(this.cateName == ''){
					uni.showToast({
						title: '请输入分类名称',
						icon: 'none'
					})
					return
				}
				if(this.isLoading){
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					})
					return
				}
				this.isLoading = true
				uni.showLoading({
					title: '加载中'
				})
				createCate({
					uid: uni.getStorageSync("userId"),
					name: this.cateName
				}).then(res => {
					uni.hideLoading()
					this.isLoading = false
					if (res.errno == 0) {
						this.addCatePop = false
						this.getCateList()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading()
					this.isLoading = false
					uni.showToast({
						title: '出错了',
						icon: 'none'
					})
				})
				
			},
			// 获取视频列表
			getVideoList(){
				getVideoList({
					cate_id: this.cate_id,
					page: this.page,
					rows: this.rows
				}).then(res => {
					console.log(res)
					this.videoList = res.data.data;
				})
			},
			openCateSelect(){
				console.log('走了么')
				this.cateListShow = true;
			},
			// 获取分类列表
			async getCateList(){
				
				// getCateList({
				// 	uid: uni.getStorageSync("userId")
				// }).then(res => {
				// 	console.log(res,'resssssssssss')
				// 	this.cateList = res.data;
				// 	if(this.cateList.length > 0){
				// 		this.cate_id = this.cateList[0].id
				// 		this.cateSelectList = this.cateList.map(item => {
				// 			return {
				// 				label: item.name,
				// 				id: item.id
				// 			}
				// 		})
						
				// 		this.getVideoList()
						
				// 	}
					
				// })
				var result = await getCateList({uid: uni.getStorageSync("userId")})
				if(result.errno == 0){
					this.cateList = result.data
					if(this.cateList.length > 0){
							this.cate_id = this.cateList[0].id
							this.cateSelectList = this.cateList.map(item => {
								return {
									label: item.name,
									id: item.id
								}
							})
							
							this.getVideoList()
							var section2Height = await getNodeHeightByClassName('section_2');
							var group2Height = await getNodeHeightByClassName('group_2');
							
							this.availableHeight = this.maskCustonHeight - section2Height - group2Height
							console.log('Element height:', this.availableHeight, 'px');
						}
				}
				
			},
			toEdit(item){
				// uni.navigateTo({
				// 	url: '/pagesEditVideo/editVideo/index'
				// })
				uni.navigateTo({
					url: '/pagesEditVideo/addVideo/index?url=' + item.url + '&id=' + item.id
				})
			},
			// toAddVideo(){
			// 	// uni.navigateTo({
			// 	// 	url: '/pagesEditVideo/addVideo/index'
			// 	// })
			// 	this.addVideoPop = true;
			// },
			addVideoConfirm(){
				if(this.selectCateId == ''){
					uni.showToast({
						title: '请选择分类',
						icon: 'none'
					})
					return
				}
				if(this.isLoading){
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					})
					return
				}
				this.isLoading = true
				uni.showLoading({
					title: '加载中'
				})
				addVideo({
					url: this.videoPath,
					cate_id: this.selectCateId,
					label: ''
				}).then(res => {
					uni.hideLoading()
					this.isLoading = false
					if (res.errno == 0) {
						this.addVideoPop = false
						this.getCateList()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading()
					this.isLoading = false
					uni.showToast({
						title: '出错了',
						icon: 'none'
					})
				})
			},
			cancelVideoPop(){
				this.addVideoPop = false;
			},
			changeTabs(item,index) {
				this.currentTabs = index;
				this.cate_id = item.id;
				this.page = 1;
				this.getVideoList()
					
			},
			openCatePop() {
				this.showPop = true
				setTimeout(()=>{
					getElementHeightByClassName('.group1', this, (height) => {
						// 在回调函数中更新数据
						console.log(height, 'height')
						this.cateContentHeight = this.maskCustonHeight - height;
						// 你可以在这里执行其他操作，比如调整布局等
					});
				},500)
				
			},
			closeCatePop() {
				this.showPop = false
			}
		}
	}
</script>
<style lang="less" scoped>
	// /deep/ .u-drawer-bottom {
	// 	background-color: rgba(0, 0, 0, 0) !important;
	// }

	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
<style>
	@import url(../../static/css/common.css);

	.mt-15-5 {
		margin-top: 31rpx;
	}

	.mt-9 {
		margin-top: 18rpx;
	}

	.page {
		/* padding-top: 34rpx; */
		background-color: #111113;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding: 0 20rpx;
	}

	.image {
		margin-left: 42rpx;
		margin-right: 13rpx;
		width: 655rpx;
		height: 24rpx;
	}

	.image_3 {
		width: 20rpx;
		height: 35rpx;
	}

	.text {
		margin-left: 265rpx;
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
	}

	.section {
		margin-left: 128rpx;
		padding: 14rpx 27rpx;
		background-color: #ffffff33;
		border-radius: 32rpx;
		height: 65rpx;
	}

	.image_2 {
		width: 62rpx;
		height: 38rpx;
	}

	.image_4 {
		width: 35rpx;
		height: 35rpx;
	}

	.group_2 {
		/* margin-top: 66rpx; */
		padding: 0 30rpx;
		height: 60rpx;
	}

	.font {
		font-size: 26rpx;
		font-family: PingFang SC;
		/* line-height: 25rpx; */
		color: #777777;

	}

	.font-cate {
		font-size: 24rpx;
		text-align: center;
		color: #DDDDDD;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 限制显示的行数 */
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		/* 保持正常的空白处理 */
	}

	.tabs-font {
		padding: 0 30rpx;
	}

	.tabs-font:first-child {
		padding-left: 0;
	}

	.active {
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
	}

	.text_2 {
		color: #ffffff;
		font-weight: 500;
	}

	.image_5 {
		width: 102rpx;
		height: 25rpx;
	}

	.image_6 {
		width: 26rpx;
		height: 20rpx;
	}

	.grid {
		/* height: 452rpx; */
		display: grid;
		grid-template-rows: repeat(2, minmax(0, 1fr));
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 26rpx;
		column-gap: 25.5rpx;
	}

	.grid-item {
		/* padding: 160rpx 12rpx 12rpx; */
		border-radius: 8rpx;
		height: 214rpx;
		/* background-image: url('https://terminator.axu9.com/images/edit/video-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat; */
		position: relative;
	}

	.cate-item {
		display: grid;
		grid-template-rows: repeat(2, minmax(0, 1fr));
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 26rpx;
		column-gap: 25.5rpx;
	}

	.image_7 {
		width: 42rpx;
		height: 42rpx;
		position: absolute;
		left: 12rpx;
		bottom: 12rpx;
	}

	.font_2 {
		font-size: 20rpx;
		font-family: PingFang SC;
		line-height: 16rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.text_3 {
		margin-top: 18rpx;
	}

	.image_8 {
		border-radius: 8rpx;
		width: 42rpx;
		height: 42rpx;
	}

	.text_4 {
		margin-top: 18rpx;
	}

	.text_5 {
		margin-top: 18rpx;
	}

	.text_6 {
		margin-top: 19rpx;
	}

	.text_7 {
		margin-top: 19rpx;
	}

	.text_8 {
		margin-top: 19rpx;
	}

	.equal-division {
		/* margin-top: 722rpx; */
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
	}
	.empty-img {
		width: 349rpx;
		height: 287rpx;
	}
	.empty-text {
		font-size: 26rpx;
		text-align: center;
		color: #FFFFFF;
		margin-top: 62rpx;
	}

	.section_2 {
		padding: 25rpx 0 19rpx;
		background-color: #171718;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
	}

	.group_3 {
		flex: 1 1 375rpx;
	}

	.equal-division-item {
		padding: 15rpx 0 18rpx;
	}

	.image_9 {
		width: 32rpx;
		height: 32rpx;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		color: #ffffff;
	}

	.horiz-divider {
		margin: 10rpx 0;
	}

	.section_3 {
		background-color: #313132;
		width: 1rpx;
		height: 86rpx;
	}



	.ml-272 {
		margin-left: 544rpx;
	}

	.mt-10-5 {
		margin-top: 21rpx;
	}

	.ml-10-5 {
		margin-left: 21rpx;
	}

	.section_22 {
		padding: 0rpx 20rpx 0;
		background-color: #0e0e12;
		/* box-sizing: border-box; */
	}

	.image1 {
		margin-left: 42rpx;
		margin-right: 13rpx;
		width: 655rpx;
		height: 24rpx;
	}

	.image_33 {
		width: 20rpx;
		height: 35rpx;
	}

	.text1 {
		margin-left: 265rpx;
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
	}

	.section_33 {
		margin-left: 128rpx;
		padding: 14rpx 27rpx;
		background-color: #ffffff33;
		border-radius: 32rpx;
		height: 65rpx;
	}

	.image_22 {
		width: 62rpx;
		height: 38rpx;
	}

	.image_44 {
		width: 35rpx;
		height: 35rpx;
	}

	.group1 {
		padding: 0 13rpx;
		padding-bottom: 26rpx;
	}

	.text_22 {
		color: #ffffff;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 27rpx;
	}

	.image_66 {
		width: 19rpx;
		height: 19rpx;
	}

	.group_22 {
		padding-left: 11rpx;
		padding-right: 4rpx;
	}

	.group_33 {
		padding-top: 4rpx;
		width: 220rpx;
	}

	.text-wrapper1 {
		margin-right: 7rpx;
		padding: 20rpx 10rpx;
		background-color: #212123;
		border-radius: 32rpx;
		width: 214rpx;
	}

	.view_33 {
		margin-right: 6rpx;
	}

	.font3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		color: #dddddd;
	}

	.image_77 {
		width: 26rpx;
		height: 26rpx;
	}

	.pos_2 {
		position: absolute;
		right: 0;
		top: 0;
	}

	.group_44 {
		padding-top: 4rpx;
		width: 221rpx;
	}

	.view1 {
		margin-left: 19rpx;
	}

	.pos_3 {
		position: absolute;
		right: 0;
		top: 0;
	}

	.view_22 {
		margin-left: 14rpx;
	}

	.pos_4 {
		position: absolute;
		right: 0;
		top: 0;
	}

	.section_44 {
		padding-bottom: 21rpx;
		background-color: #212123;
		border-radius: 32rpx;
		width: 218rpx;
		height: 67rpx;
	}

	.text_33 {
		margin-top: 23rpx;
	}

	.image_88 {
		margin-top: -46rpx;
	}

	.section_55 {
		padding-bottom: 21rpx;
		background-color: #212123;
		border-radius: 32rpx;
		width: 217rpx;
		height: 67rpx;
	}

	.text_44 {
		margin-top: 23rpx;
	}

	.image_99 {
		margin-top: -46rpx;
	}

	.group_55 {
		width: 221rpx;
	}

	.pos_5 {
		position: absolute;
		right: 0;
		top: 0;
	}

	.shadow-box {
		width: 50rpx;
		height: 30rpx;
		/* background-color: red; */
		background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(17, 17, 19, 0.3));
	}
	
	
	.section_444 {
		padding: 47rpx 40rpx 0;
		background-color: #212123;
		border-radius: 30rpx;
	}
	.ml-13-5 {
		margin-left: 27rpx;
	}
	.text_222 {
		color: #dddddd;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 31rpx;
	}
	.font_22 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 27rpx;
		font-weight: 500;
		color: #ffffff;
	}
	
	.text-wrapper_3 {
		margin-top: 27rpx;
		padding: 32rpx 0;
		background-color: #303032;
		border-radius: 16rpx;
		width: 480rpx;
	}
	
	.text_333 {
		margin-left: 23rpx;
		color: #dddddd;
		font-weight: unset;
	}
	
	.group_222 {
		padding: 32rpx 0 62rpx;
	}
	
	.text-wrapper_4 {
		padding: 26rpx 0;
		background-color: #303032;
		border-radius: 16rpx;
		width: 226rpx;
		height: 80rpx;
	}
	
	.text_444 {
		color: #dddddd;
		line-height: 26rpx;
	}
	
	.text-wrapper_5 {
		padding: 26rpx 0;
		background-color: #00e587;
		border-radius: 16rpx;
		width: 226rpx;
		height: 80rpx;
	}
</style>